<script setup lang="ts">
import type { PropType } from 'vue'

const props = defineProps({
  name: {
    type: String as PropType<string>,
    required: true,
  },
  color: {
    type: String as PropType<string>,
  },
  fillClass: {
    type: String as PropType<string>,
  },
})

// real icon name
const symbolId = computed(() => `#icon-${props.name}`)
</script>

<template>
  <svg aria-hidden="true">
    <use :xlink:href="symbolId" :class="fillClass" :fill="color" />
  </svg>
</template>
